<template>
	<view class="container">
		<view class="chat-area">
			<!-- 聊天消息列表 -->
			<view v-for="(message, index) in messages" 
			:key="index" 
			:class="{'other_box': message.who == 'other','my_box': message.who != 'other' }" 
			ref="myBox">
				<view class="my-message" 
				ref="myMsg"
				:class="{'other_message': message.who == 'other','my-message': message.who != 'other' }" >
					{{ message.msg }}
				</view>
			</view>
			
		</view>
		<view class="input-area">
			<input type="text" placeholder="请输入消息" class="input-box" v-model="newMessage" />
			<button class="send-btn" @click="sendMessage">发送</button>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations} from "vuex";
	export default {
		data() {
			return {
				messages: [
					
				],
				newMessage: '',
				// 目标聊天对象
				targetName:""
			};
		},
		mounted() {
			// WebSocket初始化
			this.InitWebsocket();
		},
		computed:{
			// 获取当前登录的用户姓名
			...mapState("my_user",["loginUserName"])
		},
		onLoad(option) {
			// 获取聊天医生的姓名
			this.targetName = option.targetName
			// 动态修改页面标题
			wx.setNavigationBarTitle({
			   title: this.targetName
			})
			// 判断角色，决定发送消息
			if(option.isStudent == "ok"){
				this.messages.push({msg:'你好，请问有什么问题?', who:'other'})
			}
		},
		onUnload() {
			// 页面关闭，关闭WebSocket连接
			uni.closeSocket();
		},
		methods: {
			// 初始化WebSocket
			InitWebsocket(){
				let that = this;
				// 连接
				uni.connectSocket({
				  url: 'ws://localhost:8787/myWebSocket',
				  success(res) {
					console.log("WebSocket连接成功！！");
				  }
				});
				// 开启连接，发送绑定连接
				uni.onSocketOpen(function (res) {
					uni.sendSocketMessage({
						// 连接，用于接收重载信息
						data: "$$" + that.loginUserName
					});
				}); // [{name:"", msg:["", ""], unreadNumber：0}]
				// 监听消息的发送
				uni.onSocketMessage(function (res) {
					// 判断返回的消息格式，截取字符串内容
					if(res.data.startsWith('@@')){ // @@开头，判定为私聊
						console.log("收到了私聊");
						// 截取主体内容
						let msg = res.data.substring(2);
						// 获取分隔符索引
						let separatorIndex = msg.indexOf('@@')
						// 获取收到的私聊消息
						let getMsg = msg.substring(separatorIndex + 2);
						console.log(getMsg);
						// 构造消息对象，加入列表,呈现聊天框内
						const tempObject = {msg: getMsg, who:"other"}
						that.messages.push(tempObject);
					}
					console.log('收到服务器内容：' + res.data);
				});
				// 监听关闭，给予提示
				uni.onSocketClose(function (res) {
				  console.log('WebSocket 已关闭！');
				});
			},
			// 发送消息
			sendMessage() {
				if (this.newMessage) {
					// 构造对象
					const tempObj = {msg:this.newMessage, who:"my"}
					// 向服务器发送私聊内容，让服务器进行转发
					uni.sendSocketMessage({
						// 连接，用于接收重载信息
						data: "@@" + this.targetName + " " + this.newMessage
					});
					// 加入列表，显示聊天记录 
					this.messages.push(tempObj);
					this.newMessage = '';
				}
			}
		}
	}	
</script>

<style lang="scss">
	.my_box{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		height: max-content;
		padding: 5px;
		overflow: auto;
		overflow-wrap: break-word;
	}
	
	.my-message {
		background-color: #007aff;
		color: #fff;
		border-radius: 10px;
		padding: 10px;
		margin: 5px;
		font-family: "幼圆";
	}
	
	.other_box{
		display: flex;
		flex-direction: row;
		justify-content: left;
		height: max-content;
		padding: 5px;
		overflow: auto;
		overflow-wrap: break-word;
	}
	
	.other_message {
		background-color: #b37de1;
		color: #fff;
		border-radius: 10px;
		padding: 10px;
		margin: 5px;
		font-family: "幼圆";
	}
	
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.chat-area {
		padding: 10px;
		flex: 1;
		overflow-y: scroll;
	}
	.input-area {
		display: flex;
		align-items: center;
		padding: 10px;
		background-color: #f5f5f5;
	}
	.input-box {
		flex: 1;
		height: 40px;
		padding: 0 10px;
		border-radius: 20px;
		border: none;
		background-color: #fff;
	}
	.send-btn {
		margin-left: 10px;
		width: 80px;
		height: 40px;
		border-radius: 20px;
		border: none;
		background-color: #007aff;
		color: #fff;
		font-size: 16px;
	}
</style>